<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>进度条 </title>	
	</head>
	<style>
		#progress{
			position: relative;
			margin: auto;
			top: 200px;
			display: block;
			width: 200px;
			height: 20px;
			border-style: dotted;
			border-width: thin;
			border-color: darkgreen;
		}
		#filldiv{
			position:absolute;
			top: 0px;
			left: 0px;
			width: 0px;
			height: 20px;
			background: blue;
		}
		#percent{
			position: absolute;
			top: 0px;
			left: 200px;
			
		}
	</style>
	<script>
		window.onload = function(){
			//获取到这个DIV元素
			var filldiv = document.getElementById("filldiv");
			var percentDiv = document.getElementById("percent");
			var count = 0;
			function move(){
				//console.log(filldiv.style.width); //无法直接获取非行内的样式属性
				filldiv.style.width = (count+=2) + "px";
				percentDiv.innerHTML = +percentDiv.innerHTML+1;
				if(count == 200){
					clearInterval(t);
				}
			}
			var t = setInterval( move , 100);
		}
		
	</script>
	<body>
		<div id="progress">
			<div id="filldiv"></div>
			<span id="percent">0</span>
		</div>
	</body>
</html>